<template>
  <!--图表一-->
  <el-card>
    <div slot="header" class=" h4">
      人员业绩表
    </div>
    <div class="flex flex-between">
      <div class="flex ">
        <span class="mr10">时间筛选:   </span>
        <el-date-picker
          v-model="time"
          size="mini"
          value-format="yyyy-MM-dd"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"/>
      </div>
      <div class="flex flex-between">
        <span class="mr10">查看值:</span>
        <el-select
          v-model="swid"
          filterable
          placeholder="请选择"
          size="mini">
          <el-option
            v-for="item in swList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @change="swChange"/>
        </el-select>
      </div>
    </div>
    <bar-chart
      :datas="datas"
      :options="originOption"
      height="500px"
    />
    <div class="flex ">
      <span class="mr10">横轴:   </span>
      <el-button :type="type===1?'primary':''" size="mini" @click="type=1">时间(月)</el-button>
      <el-button :type="type===0?'primary':''" size="mini" @click="type=0">时间(周)</el-button>
    </div>
    <!--<div class="flex pdt15">-->
    <!--<span class="mr10">选择业绩:   </span>-->
    <!--<el-button size="mini" :type="performance===0?'primary':''" @click="performance=0">销售额/回款</el-button>-->
    <!--<el-button size="mini" :type="performance===1?'primary':''" @click="performance=1">订单数</el-button>-->
    <!--</div>-->
  </el-card>
</template>

<script>
  import barChart from '../../../components/chart'

  export default {
    name: 'MemberChart',
    components: {barChart},
    data() {
      const startDate = new Date(new Date().getTime() - 31 * 24 * 3600 * 1000)
      const endDate = new Date()
      const startTime = startDate.getFullYear() + '-' + (startDate.getMonth() + 1) + '-' + startDate.getDate()
      const endTime = endDate.getFullYear() + '-' + (endDate.getMonth() + 1) + '-' + endDate.getDate()
      const time = [startTime, endTime]

      var colors = ['#5793f3', '#d14a61', '#675bba']
      return {
        time: time,
        swid: '',
        swList: [
          {
            label: '全部',
            value: 0
          },
        ],
        type: 0,
        xAxis: [{
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }],
        performance: 0,
        originOption: {
          color: colors,
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['销售额', '回款', '订单数']
          },
          grid: {
            // x: 200
          },
          label: {
            show: true,
            position: 'top'
          },
          xAxis: [{
            type: 'category',
            data: []
          }],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: colors[0]
                }
              },
              name: '销售额'
            },
            {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: colors[2]
                }
              },
              name: '订单数'
            }
          ],
          series: [
            {
              name: '销售额',
              type: 'bar',
              data: [],
              label: {
                normal: {
                  show: true,
                  formatter: function (params) {
                    return (params.seriesName + '\n' + params.data)
                  },
                }
              },
              barWidth: '30%'
            },
            {
              name: '回款',
              type: 'bar',
              data: [],
              label: {
                normal: {
                  show: true,
                  formatter: function (params) {
                    return (params.seriesName + '\n' + params.data)
                  },
                }
              },
              barWidth: '30%'
            },
            {
              name: '订单数',
              type: 'bar',
              data: [],
              label: {
                normal: {
                  show: true,
                  formatter: function (params) {
                    return (params.seriesName + '\n' + params.data)
                  },
                }
              },
              barWidth: '30%'
            },
          ]
        },
        option: {},
        departList:[]
      }
    },
    computed: {
      filter_infos(val) {
        let swid = this.swid
        let bm_id = ''

        this.departList.forEach(item=>{
          if(item.label===this.swid){
            bm_id=item.value
            swid=''
          }
        })
        const obj = {}
        obj.swid = swid
        obj.bm_id = bm_id
        obj.start_time = this.time[0]
        obj.End_time = this.time[1]
        obj.type = this.type
        return obj
      },
      datas() {
        return this.option
      }
    },
    watch: {
      filter_infos(val) {
        this.getTableList(val)
      }
    },
    mounted() {
      this.getDepartList()
    },
    methods: {
      // 获取商务列表
      getSwList() {
        console.log(this.swList)
        this.$get('action/WxUserCtrl/staffinfo')
          .then(res => {
            const list = []
            if (res.data) {
              res.data.staffinfotree.forEach(item => {
                list.push({
                  label: item.re_name,
                  value: item.id
                })
              })
            }
            this.swList = this.swList.concat(list)
            console.log(this.swList)
            this.swid = 0
          })
          .catch(_ => console.log(1))
      },
      getDepartList(){

        this.$get('action/StaffinfoCtrl/staff_group')
          .then(res => {
            const list=[]
            const list2 = []
            if (res.data.list && res.data.list.length) {
              res.data.list.forEach((item, index) => {
                list.push({
                  label:item.bm_name,
                  value: item.id
                })
                list2.push({
                  label:item.bm_name,
                  value: item.bm_name
                })
              })
            }

            this.departList = list
            this.swList=this.swList.concat(list2)
            console.log(this.swList)
            this.getSwList()
          })
      },
      swChange(val) {
        console.log(val)
      },
      getTableList(data) {
        this.$get('action/WechatAdvs/fansAndmapsForm', data)
          .then(res => {
            let list
            const data = res.data
            const sale = []
            const returned = []
            const order_total = []
            const xAxis = []

            data.ad_price.forEach((item, index) => {
              sale[index] = item['sum(a.ad_price)']
              xAxis[index] = this.type ? item.days : (item.stat_date + '\n' + item.end_date)
              order_total[index] = item['count(a.id)']
              returned[index] = item['sum(a.real_price)']
            })
            // this.sale.data = sale;
            // this.order_total.data = order_total;
            // this.returned.data = returned;
            // this.xAxis.data = xAxis;

            this.option = {
              xAxis: [{
                type: 'category',
                data: xAxis
              }],
              series: [
                {
                  name: '订单数',
                  type: 'bar',
                  data: order_total,
                  yAxisIndex: 1,
                  barWidth: '20%'
                },
                {
                  name: '回款',
                  type: 'bar',
                  data: returned,
                  yAxisIndex: 0,
                  barWidth: '20%'
                },
                {
                  name: '销售额',
                  type: 'bar',
                  data: sale,
                  yAxisIndex: 0,
                  barWidth: '20%'
                }
              ]
            }
          })
      }
    }
  }
</script>
